class Vue {
    constructor(options){
        //1 通过属性保存选项的数据
        this.$options = options||{}
        this.$data=options.data||{}
        this.$methods = options.methods || {}
        this.$el = typeof options.el =='string'?document.querySelector(options.el):options.el
        //2 把data中的属性注入vue实例 转换成getter/setter
        this._proxyData(this.$data)
         // 把 methods 中的成员注入到 vue 实例中 
        this._proxyMethods(this.$methods)
        //3 负责调用observer 监听data中所有的属性变化
        new Observer(this.$data)
        //4 负责调用compiler解析指令/差值表达式
        new Compiler(this)
    }
    _proxyData(data){
        Object.keys(data).forEach(key=>{
            Object.defineProperty(this,key,{
                enumerable:true,
                configurable:true,
                get(){
                    return data[key]
                },
                set(newValue){
                    if(newValue===data[key]){
                        return
                    }
                    data[key]=newValue
                }
            })
        })
    }
    _proxyMethods(methods) {
        Object.keys(methods).forEach(key => {
            // 把 methods 的成员注入到 vue 实例中
            this[key] = methods[key]
        })
    }
}